	<template>
		<view>
			<!-- <text>图片信息</text> -->
			<img :src="photoPath" alt="" class="img">
			<!-- <p>{{ photoPath }}</p> -->
			<view class="floor-section" v-if="floorList.length>0">
				<view class="floor-top">为您找到以下相似产品</view>
				<view class="floor-content">
			
						<view class="nav" style="background-color: white;">
							<view v-for="(navItem,nIndex) in floorNameList"
							 :key="nIndex" @click="navClick(nIndex)"
							 class="nav-item" :class="{current: navIndex === nIndex}">{{ navItem.name }}
							</view>
						</view>
						<view class="tab" style="background-color: white;margin-top: 2px;">
							<view v-for="(item,index) in floorList[navIndex].floorGoodsList" :key="index" class="tab-item" :class="{current: floorList[navIndex].curIndex === index}"
							 @click="tabClick(index,item)">
								{{ item.goodsCatalogsName }}
							</view>
						</view>
			
			
					<view class="item-area">
			
						<!-- 商品楼层 -->
			
						<view class="item-wrapper" v-if="floorList[navIndex].floorGoodsList[floorList[navIndex].curIndex]">
							<u-empty style="height: 269px;background-color: #fafafa;" icon-size="160" v-if="floorList[navIndex].floorGoodsList[floorList[navIndex].curIndex].productData.length === 0"
							 class="empty-container" mode="list" text=”暂无数据“></u-empty>
							<view class="floor-item" v-else v-for="(good,goodIndex) in floorList[navIndex].floorGoodsList[floorList[navIndex].curIndex].productData"
							 :key="goodIndex" @click="navToFloorItemDetail(good)">
								<image :src="good.goodsImage===''?errorImgUrl:good.goodsImage" mode="aspectFill" @error="good.goodsImage = errorImgUrl"></image>
								<text class="item-title more-t">{{ good.goodsName }}</text>
								<view class="bottom">
									<view class="left">
										<view >
											<text class="price">￥{{ good.goodsPrice|twoBitMoney }}</text>
										</view>
										<!-- <view v-else class="price" style="color: #fa436a;">登录查看</view> -->
									</view>
									<view class="right">
										<image src="../../static/newh5/cart.png" @click.stop="addCart(good)"></image>
									</view>
								</view>
								<view style="display: flex;flex-wrap: wrap;" v-if="good.activity&&good.activity.type">
									<template v-if="good.activity.type===1">
										<view class="tag" v-for="(rule, ruleIndex) in good.activity.ruleList" :key="rule.id">
											{{rule.num}}件{{rule.discount}}折
										</view>
									</template>
								</view>
							</view>
						</view>
			
			
					</view>
				</view>
			</view>
			<!-- 楼层 -->
		</view>
	</template>

	<script>
		import {
			getCarouselList,
			getQueryHotGoods,
			getFloorInfoWithGoods,
			getFloorInfo,
			getFloorGoods,
			getFloorGoodsForNew,
			getWaitCount,
			queryDefinedHotGood,
			countUndoWork,
			countCart,
			getNoticeList,
			homePageBanner,
			homeNotice,
			queryAdversting,
			getWelfareInfo
		} from '@/api/index/index';
		let goodsTypeList = [];
		let floorGoodsIdList = [];
		export default {
			data() {
				return {
					photoPath: '',
					floorList: [],
					floorNameList: [],
					navIndex: 0,
					catalogIdList: [],
					floorCatalogIndexList: [],
				}
			},
			mounted() {
				const queryPath = decodeURIComponent(this.$route.query.path)
				this.photoPath = queryPath
			},
			onLoad(option) {
				this.loadFloorInfo();
			},
			methods: {
				loadFloorInfo() {
					let params = {
						dept_id: uni.getStorageSync('deptinfo')[0].deptId,
						tenant_id: uni.getStorageSync('deptinfo')[0].tenantId,
						fillType: 1,
						limit: 8
					}
					getFloorInfoWithGoods({specialAreaId: 2}).then(res => {
						if (res.code === 0) {
							this.floorList = res.data;
							this.floorList.forEach(floor => {
								let flag = false;
								let floorGoodsList = floor.floorGoodsList;
								this.$set(floor, "curIndex", 0);
								floorGoodsList.forEach(good => {
									if (good.goodsCatalogs !== '') {
										flag = true;
										this.catalogIdList.push(good.goodsCatalogs);
										this.floorCatalogIndexList.push(0);
										goodsTypeList.push(good.goodsType)
										floorGoodsIdList.push(good.id)
									}
								});
								if (!flag) {
									floorGoodsIdList.push("100_100");
									goodsTypeList.push(1);
									this.catalogIdList.push(
										this.floorList[index].goodsCatalogs
									);
								}
							});
							this.floorList.forEach(floor => {
								this.floorNameList.push({
									name: floor.name
								})
							});
						}
					})
				
				},
				loadFloorGoods(floorId, floorGoodsId) {
					let catalogIds = null;
					let goodsType = null;
					// let floorGoodsId = null;
					if (this.catalogIdList.length > 0) {
						catalogIds = this.catalogIdList.join(',');
						goodsType = goodsTypeList.join(",");
						// floorGoodsId = floorGoodsIdList.join(",");
					}
					const params = {
						sortType: 1,
						page: 1,
						limit: 8,
						floor_id: floorId,
						catalogIds: catalogIds,
						goodsType: goodsType,
						floor_goods_id: floorGoodsId,
						isStandard: -1, //是否标准商品 0-非标品 1-标准商品  -1-全部商品
					}
					getFloorGoodsForNew(params).then(res => {
						if (res.code === 0) {
							this.catalogGoodsMap = {};
							this.catalogGoodsMap = res.data;
							let list = this.floorList;
							this.floorList = []
							list.forEach(item => {
								let flag = false;
								for (let i = 0; i < item.floorGoodsList.length; i++) {
									// let products = [];
									// item.floorGoodsList[i].productData = this.catalogGoodsMap[item.floorGoodsList[i].goodsCatalogs].filter(product => product.goodsPrice !== '')
									if (item.floorGoodsList[i].productData.length > 0) {
										flag = true
									}
									if (item.floorGoodsList[i].productData.length === 0) {
										item.floorGoodsList.splice(i, 1)
										i--;
									}
								}
								if (flag) {
									this.floorNameList.push({
										name: item.name
									})
									this.floorList.push(item)
								}
								// this.floorList[navIndex].floorGoodsList[floorList[navIndex].curIndex].productData
							})
							if (this.refresh) {
								uni.stopPullDownRefresh()
							}
						} else {
							this.toast(res.message)
						}
					})
				},
				navClick(index) {
					this.navIndex = index;
				},
				tabClick(tabIndex, item) {
					// this.tabIndex = tabIndex
					this.floorList[this.navIndex].curIndex = tabIndex;
					const params = {
						fillType: "1",
						limit: 8,
						floor_goods_id: item.id,
						floor_id: this.floorList[this.navIndex].id,
						page: 1
					}
					// console.log(params);
					getFloorGoodsForNew(params).then(res => {
						if (res.code === 0) {
							var product = [];
							res.data.forEach(item => {
								if (item.goodsPrice !== "") {
									product.push(item);
								}
							});
							this.floorList[this.navIndex].floorGoodsList[this.floorList[this.navIndex].curIndex].productData = product;
						}
					})
				},
			}
		}
	</script>

	<style lang="scss">
		page
		 {
			background: #f5f5f5;
		}
	.img{
		width: 100%;
		height: 100%;
	}
	.floor-section {
			margin: 20rpx 30rpx 0 30rpx;
			.floor-top{
				text-align: center;
				background-color: white;
				height: 30px;
				line-height: 30px;
			}
			.floor-content {
				display: flex;
				flex-direction: column;

				.nav {
					overflow-x: auto;
					white-space: nowrap;
					display: flex;
					// align-items: center;
					padding-left: 13px;
					flex-direction: row;
					align-items: center;
					padding-bottom: 20rpx;

					.nav-item {
						// font-size: 17px;
						padding-top: 10px;
						color: $font-color-dark;
						// margin-bottom: 8rpx;
						margin-right: 20px;
						// border-bottom: 5rpx solid #f5f5f5;
						font-family: PingFangSC-Medium;
						font-size: 13px;
						letter-spacing: 0;
						line-height: 20px;
						&.current {
							color: #00B48D;
							// background-image: -webkit-linear-gradient(left, #FFA241, #FF7948, #FF514E);
							// -webkit-mask-image: -webkit-gradient(linear, 0 0, left, from(#FFA241), to(#FF514E));
							// -webkit-background-clip: text;
							// -webkit-text-fill-color: transparent;
							// font-weight: bold;
							margin-right: 20px;

							border-bottom: 5rpx solid #00B48D;
							// border-image: -webkit-linear-gradient(left, #FFA241, #FF7948, #FF514E)1 10 1;
							// /* 控制边框颜色渐变 */
							// border-image: -moz-linear-gradient(left, #FFA241, #FF7948, #FF514E)1 10 1;
							// border-image: linear-gradient(left, #FFA241, #FF7948, #FF514E)1 10 1;

							// &::after {
							// 	content: '';
							// 	width: 40%;
							// 	height: 1px;
							// 	display: block;
							// 	margin: 0 auto;
							// 	border-bottom: 2.5px solid;
							// 	border-image: -webkit-linear-gradient(left, #FFA241, #FF7948, #FF514E)1 10 1;
							// 	/* 控制边框颜色渐变 */
							// 	border-image: -moz-linear-gradient(left, #FFA241, #FF7948, #FF514E)1 10 1;
							// 	border-image: linear-gradient(left, #FFA241, #FF7948, #FF514E)1 10 1;
							// }
						}
					}
				}
				.tab {
					padding-bottom: 20rpx;
					padding-top: 5px;
					padding-left: 13px;
					display: flex;
					flex-direction: row;
					align-items: center;
					overflow-x: auto;
					white-space: nowrap;
					font-family: PingFangSC-Medium;

					.tab-item {
						font-size: 13px;
						color: $font-color-dark;
						border-radius: 16px;
						padding: 4rpx 14rpx;
						background: none;
						margin-right: 10px;
						background: #F5F5F5;
						color: #646464;
						font-size: 12px;
						font-family: PingFangSC-Regular;
						&.current {
							background: #F5F5F5 ;
							color: #3fc7a8;
							border-radius: 20px;
							padding: 4rpx 16rpx;
						}
					}
				}
				.item-area {
					display: flex;
					margin-top: 10rpx;
					flex-direction: column;



					.item-wrapper {
						display: flex;
						justify-content: space-between;
						flex-flow: row wrap;

						.floor-item {
							width: 48%;
							background-color: #fff;
							border-radius: 10rpx;
							padding: 16rpx;
							font-size: 15px;
							color: $font-color-dark;
							// line-height: 1.8;
							text-align: center;
							margin-bottom: 20rpx;

							// padding-bottom: 30rpx;
							.item-title {
								height: 40px;
								text-align: left;
								color: $font-color-dark;
								font-size: 15px;
								margin-bottom: 8rpx;
								// overflow: hidden;
								// text-overflow: ellipsis;
							}

							image {
								width: 100%;
								height: 150px;
								border-radius: 6upx;
							}

							.bottom {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.left {
									display: flex;
									flex-direction: column;

									.integral {
										color: $uni-color-primary;
										font-size: 17px;
										// margin: 4rpx 4rpx 0 4rpx;

										&:before {
											background: url(../../static/money.png) no-repeat;
											width: 24rpx;
											height: 24rpx;
											margin-right: 4rpx;
											display: inline-block;
											content: '';
											background-size: contain;
										}

										&:after {
											margin-left: 4rpx;
											content: '积分';
											color: #909090;
											font-size: 12px;
										}
									}

									.price {
										width: 160rpx;
										color: $uni-color-primary;
										font-size: 15px;

										margin: 4rpx 4rpx 0 4rpx;
									}
								}

								.right {
									display: flex;
									align-items: center;

									image {
										width: 80rpx;
										height: 80rpx;
									}
								}
							}
						}
					}
				}


				.floor-item {}
			}
		}
	</style>
